<template>
	<view>
		<u-navbar :is-back="false" title-color="#fff" title="个人中心" :background="background" :border-bottom="false">
		</u-navbar>
		<image mode="widthFix" src="../../static/my/bg.png" style="position: absolute;width: 100%;z-index: -1;"
			:style="{'top': topHeight}"></image>
		<view class="p30" style="padding-bottom: 20rpx;">
			<view class="df aic jcsb">
				<view class="df aic">
					<u-avatar size="80" :src="userInfo.headPhoto"></u-avatar>
					<view class="cf ml20" @click="handleLogin">
						<view class="fs30 fwb">
							{{userInfo&&userInfo.nickname||'未登录'}}
						</view>
						<view class="fs24 fw4 mt10">
							{{userInfo&&userInfo.phone||''}}
							<Vip class="ml10"></Vip>
						</view>
					</view>
				</view>

				<view class="df aic">
					<nmr-icon @click="handleMsg" name="a-tongzhi-21" size="39" color="#fff"></nmr-icon>
					<nmr-icon class="ml30" @click="setJump" name="shezhi-21" size="39" color="#fff"></nmr-icon>
				</view>
			</view>

			<view class="df aic jcsa mt30">
				<view class="cf tac" @click="handleCoupon">
					<text class="fs36">{{shopPurOrderNumObj.memberCouponNum||0}}</text>
					<view class="df aic">
						<nmr-icon style="margin-top: 2rpx;" name="youhuiquan-4" size="32" color="#fff"></nmr-icon>
						<text class="ml10 fs24">优惠券</text>
					</view>
				</view>
				<view class="cf tac">
					<text class="fs36">0</text>
					<view class="df aic">
						<nmr-icon style="margin-top: 2rpx;" name="jifen" size="32" color="#fff"></nmr-icon>
						<text class="ml10 fs24">积分</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bgcf bdrt40 p30">
			<view class="df aic jcsb">
				<view class="df aic">
					<view class="titleLabelStyle">

					</view>
					<text class="ml15 c3 fs28 fwb">我的订单</text>
				</view>
				<view class="df aic" @click="jumpOrder('0')">
					<text class=" c6 fs24 fw5">查看全部</text>
					<nmr-icon class="ml5" style="margin-top: 2rpx;" name="xiangyou1" size="30" color="#666"></nmr-icon>
				</view>
			</view>

			<view class="df aic jcsa mt30 mb30">
				<view class="tac" style="position: relative;" @click="jumpOrder('1')">
					<u-badge type="error" size="mini" :offset="[-10,0]" v-if="shopPurOrderNumObj.bIndex1 > 0" :count="shopPurOrderNumObj.bIndex1"></u-badge>
					<image class="imgIcon" src="../../static/my/daifukuan-2.png" mode=""></image>
					<view class="c3 fs24 fw5 mt10">待付款</view>
				</view>
				<view class="tac" style="position: relative;" @click="jumpOrder('2')">
					<u-badge type="error" size="mini" :offset="[-10,0]" v-if="shopPurOrderNumObj.bIndex2 > 0" :count="shopPurOrderNumObj.bIndex2"></u-badge>
					<image class="imgIcon" src="../../static/my/daifahuo-2.png" mode=""></image>
					<view class="c3 fs24 fw5 mt10">待发货</view>
				</view>
				<view class="tac" style="position: relative;" @click="jumpOrder('3')">
					<u-badge type="error" size="mini" :offset="[-10,0]" v-if="shopPurOrderNumObj.bIndex3 > 0" :count="shopPurOrderNumObj.bIndex3"></u-badge>
					<image class="imgIcon" src="../../static/my/daishouhuo.png" mode=""></image>
					<view class="c3 fs24 fw5 mt10">待收货</view>
				</view>
				<view class="tac" @click="jumpOrder('4')">
					<image class="imgIcon" src="../../static/my/shouhou.png" mode=""></image>
					<view class="c3 fs24 fw5 mt10">退款售后</view>
				</view>
			</view>
			<u-image src="@/static/my/account.png" width="690" height="160rpx" @click="clickToApply"></u-image>
			<!-- <u-line color="#E5E5E5" border-style="dashed" /> -->
			<view class="df aic jcsb mt30">
				<view class="df aic">
					<view class="titleLabelStyle">

					</view>
					<text class="ml15 c3 fs28 fwb">我的功能</text>
				</view>

			</view>

			<view class="df aic jcsa mt30 mb30">
				<view class="tac" @click="jumpUrl('/pages/my/coupon/index')">
					<image class="imgIcon" src="../../static/my/youhuiquan-5.png" mode=""></image>
					<view class="c3 fs24 fw5 mt10">领券中心</view>
				</view>
				<view class="tac" @click="jumpUrl('/pages/my/address/address')">
					<image class="imgIcon" src="../../static/my/shouye-6.png" mode=""></image>
					<view class="c3 fs24 fw5 mt10">我的地址</view>
				</view>
				<view class="tac" @click="jumpUrl('/pages/my/bill/index')">
					<image class="imgIcon" src="../../static/my/biaodan.png" mode=""></image>
					<view class="c3 fs24 fw5 mt10">我的账单</view>
				</view>
				<view class="tac" @click="jumpUrl('/pages/my/invoice/index')">
					<image class="imgIcon" src="../../static/my/fapiaofuwuxianxing.png" mode=""></image>
					<view class="c3 fs24 fw5 mt10">发票中心</view>
				</view>
			</view>
			<view class="df aic jcsa mt30 mb30">
				<view class="tac" @click="jumpUrl('/pages/my/newProduct/index')">
					<image class="imgIcon" src="../../static/my/demand.png" mode=""></image>
					<view class="c3 fs24 fw5 mt10">新品需求</view>
				</view>
				<view class="tac" @click="jumpUrl('/pages/my/evaluate/index')">
					<image class="imgIcon" src="../../static/my/pinglun-3.png" mode=""></image>
					<view class="c3 fs24 fw5 mt10">配送评价</view>
				</view>
				<view class="tac" @click="jumpUrl('/pages/my/viewRecord/index')">
					<image class="imgIcon" src="../../static/my/footprint.png" mode=""></image>
					<view class="c3 fs24 fw5 mt10">浏览记录</view>
				</view>
				<view class="tac pr">
					<image class="imgIcon" src="../../static/my/kefu-6.png" mode=""></image>
					<view class="c3 fs24 fw5 mt10">客服与帮助</view>
					<button class="contact" open-type="contact"></button>
				</view>
			</view>
			<u-line color="#E5E5E5" border-style="dashed" />

			<view class="df aic jcsb mt30">
				<view class="df aic">
					<view class="titleLabelStyle">

					</view>
					<text class="ml15 c3 fs28 fwb">资质证照</text>
				</view>

			</view>

			<view class="df aic jcsb mt30" v-if="TOKEN">
				<view class="tac">
					<u-image width="335rpx" @click="preview('https://pay.zhaimei365.com/image/bShop/bus.png')"
						height="200rpx" src="https://pay.zhaimei365.com/image/bShop/bus.png"></u-image>
					<view class="c3 fs24 fw5 mt10">
						营业执照
					</view>
				</view>
				<view class="tac ml20">
					<u-image width="335rpx" @click="preview('https://pay.zhaimei365.com/image/bShop/busFoodCard.png')"
						height="200rpx" src="https://pay.zhaimei365.com/image/bShop/busFoodCard.png"></u-image>
					<view class="c3 fs24 fw5 mt10">
						食品经营许可证
					</view>
				</view>
			</view>

			<view class="df aic jcc mt40" v-if="!TOKEN">
				<view class="tac">
					<image style="width: 224rpx;" src="../../static/empty/qualifications.png" mode="widthFix"></image>
					<view class="c6 fs28 mt16">
						登录后才有权限查看哦~
					</view>
				</view>
			</view>
			<view style="height: 200rpx;" v-if="TOKEN&&bindUser.nickName"></view>
			<view v-if="TOKEN&&bindUser.nickName" class="bind-user">
				<!-- <u-line margin="25rpx 0 0" color="#E5E5E5" border-style="dashed" /> -->
				<view class="df aic jcsb mt30">
					<view class="df aic">
						<view class="titleLabelStyle">
						</view>
						<text class="ml15 c3 fs28 fwb">专属服务</text>
					</view>
				</view>
				<view class="bind-box-user df aic jcsb">
					<view class="">
						<view class="">
							<text class="fwb fs28 c3 mr20">{{bindUser.nickName||''}}</text><text class="fs24 c3">业务经理</text>
						</view>
						<view class="mt15 fs24 c3">
							{{bindUser.phonenumber||''}}
						</view>
					</view>
					<view class="" @click="cellPhone">
						<image src="../../static/my/dianhua-5.png" style="width: 50rpx;height: 50rpx;"></image>
					</view>
				</view>
			</view>
		</view>
		<LoginPopup @loginSuccess="loginSuccess" ref="LoginPopup"></LoginPopup>
	</view>
</template>

<script>
	import {
		shopPurOrderNum,getAntUser
	} from '@/api/common.js'
	import {
		getInfo,
	} from '@/api/login.js'
	export default {
	
		data() {
			return {
				background: {
					background: 'transparent'
				},
				topHeight: 0,
				userInfo: {},
				shopPurOrderNumObj:{
					bIndex1:0,
					bIndex2:0,
					bIndex3:0,
				},
				bindUser:{}
			}
		},
		mounted() {
			this.handleLogin()
		},
        onShow() {
			if(!this.TOKEN){
				return
			}
			this.updateInfo()
			
        	this.shopPurOrderNumFn()
			this.getAntUser()
        },
		methods: {
			updateInfo(){
				getInfo().then(res => {
					this.$u.vuex('USERINFO', res.data)
					this.userInfo =  res.data.user
				})
			},
			handleCoupon(){
				uni.navigateTo({
					url:'/pages/my/coupon/myCoupon'
				})
			},
			cellPhone(){
				uni.makePhoneCall({
					phoneNumber:this.bindUser.phonenumber
				})
			},
			getAntUser(){
				if(!this.TOKEN)return
				getAntUser().then(res =>{
					if(res.code==200){
						
						this.bindUser = res.data
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							mask:true
						})
					}
				})
			},
			clickToApply(){
				this.$common.toH5Handle({title:this.APPTITLE,url:'https://mp.weixin.qq.com/s/2oMyhBJJArPa3NXBxHGZOQ'})
			},
			shopPurOrderNumFn(){
				shopPurOrderNum().then(res =>{
					if(res.code == 200) {
						this.shopPurOrderNumObj = res.data
					}
				})
			},
			preview(e) {
				wx.previewImage({
					urls: [e] // 需要预览的图片http链接列表
				})
			},
			setJump() {
				uni.navigateTo({
					url: '/pages/my/set/set'
				})
			},
			handleMsg() {
				uni.navigateTo({
					url: '/pages/my/msgRecord/index'
				})
			},
			handleLogin() {
				this.$refs.LoginPopup.checkLogin()
			},
			loginSuccess() {
				this.getAntUser()
				this.userInfo = this.USERINFO.user
			},
			jumpUrl(url) {
				if (this.TOKEN) {
					uni.navigateTo({
						url: url
					})
				} else {
					this.handleLogin()
				}

			},
			jumpOrder(type) {
				if (this.TOKEN) {
					uni.navigateTo({
						url: '/pages/order/order?current=' + type
					})
					// if (type == 4) {
					// 	uni.navigateTo({
					// 		url: '/pages/order/refund'
					// 	})
					// } else {
					// 	uni.navigateTo({
					// 		url: '/pages/order/order?current=' + type
					// 	})
					// }
				} else {
					this.handleLogin()
				}

			},


		},
		onLoad() {
			this.userInfo = this.USERINFO.user
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					console.log(res)
					// #ifdef MP-WEIXIN
					that.topHeight = res.statusBarHeight < 21 ? '-32px' : res.statusBarHeight < 31 ? '-14px' :
						'0'
					// #endif


				}
			});
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style scoped lang="scss">
	.bind-user{
		position: fixed;
		bottom: 0;
		background-color: white;
		width: 750rpx;
		padding-left: 30rpx;
		left: 0;
		padding-bottom: 20rpx;
		box-shadow: 0rpx 0rpx 4rpx 1rpx rgba(0, 0, 0, 0.16);
	}
	.bind-box-user{
		padding: 20rpx 30rpx 0;
	}
	.bdrt40 {
		border-radius: 40rpx 40rpx 0 0;
	}

	.titleLabelStyle {
		width: 6rpx;
		height: 30rpx;
		background: linear-gradient(90deg, #48A147 0%, #8AE38A 100%);
		border-radius: 22rpx;
	}

	.imgIcon {
		width: 54rpx;
		height: 54rpx;
	}

	.contact {
		top: 0;
		position: absolute;
		width: 120rpx;
		height: 100rpx;
		opacity: 0;
	}
</style>